// 账号人设维护页面样式

.app-container {
  // background: var(--el-bg-color-page);
  // min-height: 100vh;
  // padding: 20px !important;
  // margin: 0 !important;

  // display: flex;
  // flex-direction: column;
  margin: 20px;
  padding: 20px;
  background-color: var(--el-bg-color);
  border-radius: 8px;
}

// 页面头部
.page-header {
  flex-shrink: 0;
  margin-bottom: 24px;

  .store-type-select {
    min-width: 150px;

    :deep(.el-input__wrapper) {
      border-radius: 6px;
      border: 1px solid var(--el-border-color);

      &:hover {
        border-color: var(--el-border-color-darker);
      }

      &.is-focus {
        border-color: var(--el-color-primary);
        box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
      }
    }
  }
}

// 搜索区域
.search-section {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;

  .search-box {
    flex: 3; // 搜索框占比大
    min-width: 0; // 确保flex正常工作

    :deep(.el-input) {
      .el-input__wrapper {
        border-radius: 6px;
        border: 1px solid var(--el-border-color);

        &:hover {
          border-color: var(--el-border-color-darker);
        }

        &.is-focus {
          border-color: var(--el-color-primary);
          box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
        }
      }

      .el-input__prefix {
        color: var(--el-text-color-placeholder);
      }
    }
  }

  .store-type-select {
    flex: 1; // 下拉框占比小
    min-width: 120px;
    max-width: 180px;

    :deep(.el-input__wrapper) {
      border-radius: 6px;
      border: 1px solid #e5e7eb;

      &:hover {
        border-color: #d1d5db;
      }

      &.is-focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
      }
    }
  }
}

// 人设网格布局
.personas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

// 响应式设计
@media (max-width: 768px) {
  .app-container {
    margin: 10px !important;
    padding: 15px !important;
  }

  .search-section {
    margin-bottom: 20px;
  }

  .personas-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
